<template>
  <!-- Vue3是可以使用多个根级节点的，但是Vue2不行 -->
  <div>111</div>
  <h1>{{ myData }}</h1>
  <div>{{ msg }}</div>
  <p>{{ count }}</p>
  <button @click="add">button+1</button>
  <div>222</div>
</template>

<script>
// vue3.2 之前是不支持在 script 标签上写上 setup 语法糖的，你就得按照如下的写法去写，下面的写法相对来说是有些啰嗦的
import { ref } from 'vue'
export default {
  // Vue2的写法，vue就不再推荐，推荐是组合式api的写法，也就是setup语法
  //   props: { msg: String },
  //   data () {
  //     return {
  //       myData: 100
  //     }
  //   },
  //   mounted () {
  //     console.log('---mounted---', this)
  //   },
  // vue3中我们的代码几乎全部都是写在 setup 中
  // 计算你以后是在vue3.2之前的版本做开发，只要是vue3的版本，我们的代码，几乎全部就写在setup中
  // 而setup函数中，定义模型、方法、计算属性、监听器等，都是使用函数，不需要使用到对象，所以它里面的this是 undefined
  setup (props) {
    console.log('---setup---', this)

    // console.log(props)
    // 通过ref定义的模型数据，如果你是在script中，必须要通过 xxx.value 去操作
    const count = ref(0)

    const add = () => {
      count.value++
    }

    return {
      count,
      add
    }
  }
}
</script>
